import './App.css';
import './styles/variables.css';
import 'antd/dist/reset.css';
import { theme as antdTheme, ConfigProvider } from 'antd';
import Demo from './components/MapView/Demo';
import ThemeToggle from './components/ThemeToggle';
import { ThemeProvider, useTheme } from './contexts/ThemeContext';

const AppContent: React.FC = () => {
  const { theme } = useTheme();

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1890ff',
          borderRadius: 6,
        },
        algorithm:
          antdTheme[theme === 'dark' ? 'darkAlgorithm' : 'defaultAlgorithm'],
      }}
    >
      <div className="content">
        <ThemeToggle />
        <h1>Rsbuild with React</h1>
        <p>Start building amazing things with Rsbuild.</p>
        <div style={{ width: '100%', height: '600px', padding: '8px' }}>
          <Demo />
        </div>
      </div>
    </ConfigProvider>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <AppContent />
    </ThemeProvider>
  );
};

export default App;
